import { useTheme } from '@/store/settingsStore.ts';
import { Drawer } from '@ycx/ui';
import { forwardRef, useImperativeHandle, useState } from 'react';
import { useCatch } from '@/hooks';
import { Button, Descriptions, DescriptionsProps, Image, Space, Typography } from 'antd';
import { useQuery } from '@tanstack/react-query';
import OrderServices from '@/api/services/workOrderServices.ts';

export type DetailDrawerRef = {
  open: (orderId: number) => void;
};

const DetailDrawer = forwardRef<DetailDrawerRef>((_props, ref) => {
  const theme = useTheme();
  const [id, setId] = useState<number>();
  const [open, setOpen] = useState(false);
  const { Title } = Typography;

  const catchFn = useCatch();

  const { data: orderInfo, isFetching } = useQuery({
    queryKey: ['order-detail', id],
    queryFn: () => catchFn(() => OrderServices.getDetail(id!)),
    select: ({ data }) => data,
    enabled: !!id,
    staleTime: 0,
  });

  const orderItems: DescriptionsProps['items'] = [
    {
      key: 'name',
      label: '工单名称',
      children: orderInfo?.name,
      span: 12,
    },
    {
      key: 'headName',
      label: '养护负责人',
      children: orderInfo?.headName,
      span: 12,
    },
    {
      key: 'userName',
      label: '项目经理',
      children: orderInfo?.userName,
      span: 12,
    },
    {
      key: 'date',
      label: '计划时间',
      children: `${orderInfo?.beginTime} - ${orderInfo?.endTime}`,
      span: 12,
    },
    {
      key: 'remarks',
      label: '备注',
      children: orderInfo?.remarks,
      span: 24,
    },
  ];

  const resultItems: DescriptionsProps['items'] = [
    {
      key: 'handleTime',
      label: '完成时间',
      children: orderInfo?.handleTime,
      span: 24,
    },
    {
      key: 'fileList',
      label: '现场照片',
      children:
        orderInfo?.fileList && orderInfo?.fileList.length ? (
          <Image.PreviewGroup>
            <Space size={8}>
              {orderInfo?.fileList?.map((item) => (
                <Image
                  placeholder={true}
                  key={item.id}
                  width="180px"
                  height="100px"
                  src={`https://oss.uconcern.com/${item.fileUrl}`}
                />
              ))}
            </Space>
          </Image.PreviewGroup>
        ) : (
          '-'
        ),
      span: 24,
    },
    {
      key: 'notes',
      label: '情况说明',
      children: orderInfo?.notes,
      span: 24,
    },
  ];

  const alarmItems: DescriptionsProps['items'] = [
    {
      key: 'alarmDesc',
      label: '病害类型',
      children: orderInfo?.alarmDesc,
      span: 12,
    },
    {
      key: 'longitude',
      label: '经纬度',
      children: `${orderInfo?.longitude},${orderInfo?.latitude}`,
      span: 12,
    },
    {
      key: 'reportPosition',
      label: '上报位置',
      children: orderInfo?.reportPosition,
      span: 24,
    },
    {
      key: 'carNo',
      label: '报警设备',
      children: orderInfo?.carNo,
      span: 12,
    },
    {
      key: 'alarmTime',
      label: '报警时间',
      children: orderInfo?.alarmTime,
      span: 12,
    },
    {
      key: 'reportName',
      label: '上报部门',
      children: orderInfo?.reportName,
      span: 12,
    },
    {
      key: 'reportDesc',
      label: '详细说明',
      children: orderInfo?.reportDesc,
      span: 12,
    },
    {
      key: 'alarmFileList',
      label: '现场照片',
      children:
        orderInfo?.alarmFileList && orderInfo?.alarmFileList.length ? (
          <Image.PreviewGroup>
            <Space size={8}>
              {orderInfo?.alarmFileList?.map((item) => (
                <Image
                  placeholder={true}
                  key={item.id}
                  width="180px"
                  height="100px"
                  src={`https://oss.uconcern.com/${item.fileUrl}`}
                />
              ))}
            </Space>
          </Image.PreviewGroup>
        ) : (
          '-'
        ),
      span: 12,
    },
  ];

  const close = () => {
    setOpen(false);
    setId(undefined);
  };

  useImperativeHandle(ref, () => ({
    open: (orderId: number) => {
      setId(orderId);
      setOpen(true);
    },
  }));

  return (
    <Drawer
      title="工单详情"
      width={600}
      theme={theme}
      open={open}
      onClose={close}
      loading={isFetching}
      footer={
        <Button type="primary" onClick={close}>
          返回
        </Button>
      }
    >
      <Title level={5}>工单详情</Title>
      <Descriptions layout="vertical" size="small" column={24} items={orderItems} />
      {/*TODO*/}
      {orderInfo?.handleStatus ? (
        <>
          <Title level={5} className="mt-8">
            处置结果
          </Title>
          <Descriptions layout="vertical" size="small" column={24} items={resultItems} />
        </>
      ) : null}
      <Title level={5} className="mt-8">
        病害详情
      </Title>
      <Descriptions layout="vertical" size="small" column={24} items={alarmItems} />
    </Drawer>
  );
});

export default DetailDrawer;
